import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin ,message,Tooltip} from 'antd';
import React from 'react';
import { history, ConnectProps, connect } from 'umi';
import { ConnectState } from '@/models/connect';
// import { CurrentUser } from '@/models/user';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import {logOut} from '../../utils/utils'
export interface GlobalHeaderRightProps extends Partial<ConnectProps> {
  // currentUser?: CurrentUser;
  menu?: boolean;
}

class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
  logoutHandle=()=>{
    const { dispatch } = this.props;
    logOut()
    if (dispatch) {
      dispatch({
        type: 'login/logout',
      });
    }
  }
  onMenuClick = (event: {
    key: React.Key;
    keyPath: React.Key[];
    item: React.ReactInstance;
    domEvent: React.MouseEvent<HTMLElement>;
  }) => {
    const { key } = event;

    if (key === 'logout') {
      this.logoutHandle()
      return;
    }

    history.push(`/account/${key}`);
  };
  componentDidMount() {
    const logintime = Number(localStorage.getItem('logintime'))
    const now = Date.now()
    const remember_me = localStorage.getItem('remember_me')
    if (remember_me === 'true' && (now - logintime) / 60 / 1000 > 89400) {
      message.error('登录超时')
      history.push('/user/login')
      logOut()
      return
    }
  }

  render(): React.ReactNode {
    const {
      // currentUser = {
      //   avatar: '',
      //   name: '',
      // },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <UserOutlined />
            个人中心
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    const id_number = localStorage.getItem('id_number');
    const name = localStorage.getItem('name');
    const subjects = localStorage.getItem('subjects')||{};
    const authority = localStorage.getItem('antd-pro-authority')===`["2"]`;
    return id_number ? (
      <div className="header-info">
        <HeaderDropdown overlay={menuHeaderDropdown}>
          <span className={`${styles.action} ${styles.account}`}>
            <Avatar size="small" className={styles.avatar} src="https://www.shejiyuan.com/Public/images/exam_avatar.png" alt="avatar" />
            <span className={`${styles.name} anticon`}>{(name === 'null'||name==='undefined') ? ' ' : name}</span>
          </span>
        </HeaderDropdown>
        <div className={styles['other-info']}>
          <div>准考证号：{id_number}</div>
         {
            authority&&<div>
            <Tooltip title={subjects === 'null' ? ' ' : subjects.substr(0, subjects.length - 1).replace(/-/g, '/')}>
            <span className={styles['header-subject']}>培训科目专业：
{subjects === 'null' ? ' ' : subjects.substr(0, subjects.length - 1).replace(/-/g, '/')}</span>
            </Tooltip>
          </div>
         }
        </div>
      </div>
    ) : (
        <span className={`${styles.action} ${styles.account}`}>
          <Spin
            size="small"
            style={{
              marginLeft: 8,
              marginRight: 8,
            }}
          />
        </span>
      );
  }
}

export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
